<!DOCTYPE html>
<html lang="{:cookie('lang')}">
<head>
    <title>{$title|default=''}{if !empty($title)} · {/if}{:sysconf('site_name')}</title>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=0.4">
    <!-- 引入 Vue3.js -->
    <script src="__ROOT__/static/plugs/vue/vue.global.js?at={:date('md')}"></script>
    <!-- 引入 axios.js -->
    <script src="__ROOT__/static/plugs/axios/axios.min.js?at={:date('md')}"></script>
    <!-- 引入 Element Plus -->
    <link rel="stylesheet" href="__ROOT__/static/plugs/element-plus/dist/index.css?at={:date('md')}">
    <script src="__ROOT__/static/plugs/element-plus/dist/index.full.js?at={:date('md')}"></script>
    <!-- 引入 Element Plus icons-vue-->
    <script src="__ROOT__/static/plugs/element-plus/icons-vue/index.iife.min.js?at={:date('md')}"></script>
    <!-- 引入 NProgress-->
    <script src="__ROOT__/static/plugs/nprogress/nprogress.js?at={:date('md')}"></script>
    <!-- 引入 remixicon -->
    <link rel="stylesheet" href="__ROOT__/static/plugs/remixicon/remixicon.css?at={:date('md')}">
    <!-- 引入 style -->
    <link rel="stylesheet" href="__ROOT__/static/theme/css/style.css?at={:date('md')}">
    <link rel="stylesheet" href="__ROOT__/static/theme/css/ladmin.css?at={:date('md')}">
    {block name='style'}{/block}
</head>
<body data-layout="{:sysconf('site_theme')}">
    {block name='body'}
    <div id="app" class="aminui">
        <!-- 加载动画 -->
        <div class="app-loading">
            <div class="app-loading__logo">
                {if sysconf('site_icon')}
                <img src="{:sysconf('site_icon')}" />
                {else}
                <img src="__ROOT__/static/theme/img/logo.png" />
                {/if}
            </div>
            <div class="app-loading__loader"></div>
            <div class="app-loading__title">{:sysconf('app_name')}{if sysconf('app_version')}<sup class="is-fixed">{:sysconf('app_version')}</sup>{/if}</div>
        </div>
        <!-- 通栏布局 -->
        <template v-if="'{:sysconf('site_theme')}'=='header'">
            {include file="index/layout-header"}
        </template>
        <!-- 经典布局 -->
        <template v-else-if="'{:sysconf('site_theme')}'=='menu'">
            {include file="index/layout-menu"}
        </template>
        <!-- 默认布局 -->
        <template v-else>
            {include file="index/layout-default"}
        </template>
        <div class="layout-setting" @click="openSetting"><el-icon><brush-filled /></el-icon></div>
        <el-drawer title="{:lang('user.layout_config')}" v-model="settingDialog" :size="400" append-to-body destroy-on-close>
            <!-- 布局实时设置 开始 -->
            {include file="index/index-setting"}
            <!-- 布局实时设置 结束 -->
        </el-drawer>
    </div>
    <script>
        const App = {
            data() {
                return {
                    settingDialog: false,
                    MENU_UNIQUE_OPENED: false,
                    // 搜索按纽
                    searchVisible: false,
                    tasksVisible: false,
                    breadList:[],
                    menu: [],
                    nextMenu: [],
                    pmenu: {},
                    active: '',
                    path:""
                };
            },
            async created() {
                var menu = await $API.menu.get("{:url('index/getmenu')}");
                this.menu = menu.data;
			    this.showThis();
                this.getBreadcrumb();
            },
            methods: {
                // loading加载
                loading() {
                    //延时关闭首页加载
                    setTimeout(() => {
                        document.querySelector('.app-loading').remove();
                    }, 500);
                },
                //全屏
                screen() {
                    var element = document.documentElement;
                    $TOOL.screen(element)
                },
                //搜索
                search() {
                    this.searchVisible = true
                },
                // 布局设置
                openSetting() {
                    this.settingDialog = true;
                },
                tasks() {
                    //
                },
                showMsg() {
                    //
                },
                handleUser(command) {
                    //
                },
                showMenu(item) {
                    this.pmenu = item;
                    this.nextMenu = item.sub;
                    this.$nextTick(()=> {
                        if (item.url.length>1) return this.path=this.getUri(item.url), location.href=item.url+'?spm=m-'+item.id, this.getBreadcrumb();;
                        if (item.sub[0].id && item.sub[0].sub[0].id) return this.path=this.getUri(item.sub[0].sub[0].url),this.active = String(item.sub[0].sub[0].id), location.href=item.sub[0].sub[0].url+this.spm(item), this.getBreadcrumb();;
                    })
                },
                spm(item) {
                    var node = '?spm=m-';
                    var breadCrumb = item.id + '-' + item.sub[0].id + '-' + item.sub[0].sub[0].id;
                    return node + breadCrumb;
                },
                getUri(uri) {
                    uri = uri || location.href;
                    uri = uri.indexOf(location.host) > -1 ? uri.split(location.host)[1] : uri;
                    return (uri.indexOf('#') > -1 ? uri.split('#')[1] : uri).split('?')[0];
                },
                iframe() {
                    const iframe = document.querySelector('.adminui-iframe');
                    if (iframe.attachEvent) {
                        iframe.attachEvent('onload', function () { NProgress.done(); })
                    } else {
                        iframe.onload = () => {
                            const iframeWindow = iframe.contentWindow;
                            iframeWindow.addEventListener('beforeunload', () => {
                                const app = iframe.contentWindow.myApp;
                                if (app && app._container) {
                                    app.unmount();
                                    app._context = null;
                                }
                            });
                            NProgress.done();
                        };
                    }
                },
                //路由监听高亮
                showThis() {
                    var node = location.href.replace(/.*spm=([\d\-m]+).*/ig, '$1').split('-');
                    var pid = location.hash.length < 1 ? 1 : node[1];
                    this.pmenu = this.menu.filter(item => 'id' in item && item.id == pid)[0];
                    this.nextMenu = this.pmenu.sub;
                    var id  = location.hash.length < 1 ? this.nextMenu[0].sub[0].id : node[3];
                    var url = location.hash.length < 1 ? this.nextMenu[0].sub[0].url+this.spm(this.pmenu) : location.hash;
                    location.href = url;
                    this.$nextTick(()=> {
                        this.active = String(id);
                        this.path = this.getUri(location.hash.length < 1 ? this.nextMenu[0].sub[0].url : url);
                    })
                },
                showMain(item) {
                    var node = location.href.replace(/.*spm=([\d\-m]+).*/ig, '$1').split('-');node[2] = String(item.pid);node[3] = String(item.id);
                    this.$nextTick(()=> {
                        this.path = this.getUri(item.url);
                        this.active = String(item.id);
                        location.href = item.url+'?spm='+node.join('-');
                        this.getBreadcrumb();
                    })
                },
                hasChildren(item) {
                    return item.sub
                },
                async getBreadcrumb() {
                    var node = location.href.replace(/.*spm=([\d\-m]+).*/ig, '$1').split('-'), tmp = node.shift();
                    var breadcrumb = await $API.breadcrumb.post("{:url('index/breadcrumb')}",{'crumb' : node});
                    if (breadcrumb.code) return this.breadList = breadcrumb.data;
                }
            },
            computed: {
                ismobile() {
                    return false;
                },
                menuIsCollapse() {
                    return false;
                }
            },
            async mounted () {
                this.loading();
                this.iframe();
            },
        }
    </script>
    {/block}
    <script src="__ROOT__/static/plugs/require/require.js"></script>
    <script src="__ROOT__/static/admin.js"></script>
    <script src="__ROOT__/static/plugs/tools/request.js"></script>
    <script src="__ROOT__/static/plugs/tools/api.js"></script>
    <script src="__ROOT__/static/plugs/tools/tool.js"></script>
    {block name='script'}{/block}
    <script>
        const { createApp, watchEffect, reactive, toRefs, ref, onMounted, nextTick } = Vue;
        const app = Vue.createApp(App);
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component)
        }
        app.use(ElementPlus).mount("#app");
        window.myApp = app;
    </script>
</body>
</html>